<template>
  <div class="flex-center-between">
    <div class="flex-center p16 br4 pointer" :class="{ 'bgc-themeA10': status === 1 }" style="min-width: 240px" @click="setStatus(1)">
      <img src="./zaibao.png" class="mr12" style="width: 48px; height: 48px" />
      <div>
        <div>在保中人员</div>
        <div>{{ dataSource.insIngCount || dataSource.insIngCount === 0 ? dataSource.insIngCount : "--" }}</div>
      </div>
    </div>
    <div class="flex-center p16 br4 pointer" :class="{ 'bgc-themeA10': status === 2 }" style="min-width: 240px" @click="setStatus(2)">
      <img src="./yishixiao.png" class="mr12" style="width: 48px; height: 48px" />
      <div>
        <div>已失效人员</div>
        <div>{{ dataSource.insLapseCount || dataSource.insLapseCount === 0 ? dataSource.insLapseCount : "--" }}</div>
      </div>
    </div>
    <div class="flex-center p16 br4 pointer" :class="{ 'bgc-themeA10': status === 3 }" style="min-width: 240px" @click="setStatus(3)">
      <img src="./daishengxiao.png" class="mr12" style="width: 48px; height: 48px" />
      <div>
        <div>待生效人员</div>
        <div>{{ dataSource.insFutureCount || dataSource.insFutureCount === 0 ? dataSource.insFutureCount : "--" }}</div>
      </div>
    </div>
    <div class="flex-center p16 br4" style="min-width: 240px">
      <img src="./zaibaobaofei.png" class="mr12" style="width: 48px; height: 48px" />
      <div>
        <div>在保保费合计</div>
        <div>{{ dataSource.amount || dataSource.amount === 0 ? dataSource.amount : "--" }}元/月</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    params: {
      type: Object,
      default: () => {}
    },
    status: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dataSource: {}
    };
  },
  computed: {},
  watch: {
    params: {
      handler() {
        this.loadData();
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    setStatus(val) {
      this.$emit("update:status", val);
    },
    loadData() {
      if (this.params && this.params.type && this.params.type.id) {
        this.$request({
          url: `/hr/api/v1/hrInsurance/recordListStatistics`,
          method: "post",
          data: this.params
        })
          .then((res) => {
            this.dataSource = res.data;
          })
          .catch((err) => {
            console.log("recordListStatistics", err);
          });
      }
    }
  }
};
</script>
<style lang="scss"></style>
